<template>
    <div class="tableList" >
    	<el-progress :percentage="100" :show-text=false  v-if="progressShow"></el-progress>
    	<div class="searchList" v-if="formListIshow" :id="param.id">
    		<!-- <p>查询条件-<i >{{searchword.desc}}</i><el-button @click="clickListShow" v-text="searchListShow?'收缩':'展开'"></el-button></p> -->
    		
	    		<el-form :inline="true"  class="demo-form-inline" >
					<el-form-item :label="search.coldesc+':'" v-for="(search,index) in searchlist" :key="index" >
					    <el-input placeholder="请输入" v-model="search.default" class="EditText" v-if="!search.display" :data-index="index"></el-input>
				
					    <el-select v-model="search.default" placeholder="请选择" class="EditSelect" v-if="search.display == 'OBJ_SELECT'">
					    <el-option
					      v-for="item in search.combobox"
					      :key="item.limitdesc"
					      :label="item.limitdesc"
					      :value="item.limitdesc">
					    </el-option>
  						</el-select>
						
  						<el-checkbox v-if="search.display == 'OBJ_CHECK'" v-model="search.default" style=""></el-checkbox>

						<el-popover
						  placement="bottom"
						  title=""
						  trigger="click"
						  >

						  <el-input placeholder="请输入" v-model="search.default" class="EditText" v-if="search.display == 'OBJ_FK'" icon="search" slot="reference"></el-input>
						  
						</el-popover>

					   
					    <div class="datevue" :id="search.colid"  v-if="search.display == 'OBJ_DATE' || search.display == 'OBJ_DATENUMBER'">
							<datevue :date="search.daterange" :timetype="search.display"></datevue>
						</div>
					  	
					  	
					  	<!-- <datevue v-if="search.display == 'OBJ_DATE'"></datevue> -->
					
						<!-- <el-col :span="11" v-if="search.display == 'OBJ_DATE'">
					      <el-form-item >
					        <el-date-picker type="date" placeholder="选择日期"  style="width: 100%;"></el-date-picker>
					      </el-form-item>
					    </el-col>
					    <el-col class="line" :span="2" v-if="search.display == 'OBJ_DATE'">-</el-col>
					    <el-col :span="11" v-if="search.display == 'OBJ_DATE'">
					      <el-form-item >
					        <el-date-picker type="date" placeholder="选择日期"  style="width: 100%;"></el-date-picker>
					      </el-form-item>
					    </el-col> -->




					    <el-radio-group v-model="search.default" v-if="search.display == 'OBJ_RADIO'">
						    <el-radio :label="item.limitval" v-for="(item,index) in search.combobox" :key="index">{{item.limitdesc}}</el-radio>
						    
						  </el-radio-group>
  						
					</el-form-item>
						
						  
					<div class="button-group" >
					  <el-button v-if="searchlist.length > 0" @click="searchData('search')">查找</el-button>
					  <el-button v-for="(item, index) in waListButtons" v-text="item.webdesc" @click="webaction(item)" :key="index"></el-button>
					</div>
				</el-form>

				<div class="tag-close" @click="clickListShow">
					<i class='el-icon-arrow-up' v-if="searchListShow"></i>
					<i class='el-icon-arrow-down' v-else></i>
				</div>
			
    	</div>
    	<!-- searchlist end -->
    	<div class="detailList" :id="'detailList'+param.id">
    		<div class="detailHead">

    			<el-pagination
				  @size-change="handleSizeChange"
      			  @current-change="handleCurrentChange"
			      :current-page="currentpage"
			      :page-sizes="table_page_size"
			      :page-size="Number(defaultrange)"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="totalRowCount">
			    </el-pagination>



    			<div class="button-group">

    				<el-dropdown :hide-on-click="false" trigger="click" style="margin-right: 12px;">
					  <el-button type="primary">
					    隐藏列<i class="el-icon-caret-bottom el-icon--right"></i>
					  </el-button>
					  <el-dropdown-menu slot="dropdown" style="height: 300px;overflow:auto" >
					    <el-dropdown-item v-for="(item,index) in tableHiddenTH">
							<template>
							  <el-checkbox >{{item.text}}</el-checkbox>
							</template>
					    </el-dropdown-item>

						<el-dropdown-item>
							<span>筛选</span>
							<span>重置</span>
						</el-dropdown-item>


					  </el-dropdown-menu>
					</el-dropdown>
    				<el-button v-text="buttonrefresh.name" @click="searchData('fresh')" style="margin-left: 10px"></el-button>
	    			<el-button v-for="(item, index) in buttonGroupShow" :key="index" v-text="item.name"></el-button>
					
					<el-button v-for="(item, index) in buttonGroupHidden" v-text="item.name" v-if="buttonGroupHidden.length == 1" :key="index"></el-button>
	    			<el-dropdown v-if="buttonGroupHidden.length > 1">
					  <el-button type="primary">
					    更多<i class="el-icon-caret-bottom el-icon--right"></i>
					  </el-button>
					  <el-dropdown-menu slot="dropdown">
					    <el-dropdown-item v-for="(item, index) in buttonGroupHidden" :key="index" v-text="item.name"></el-dropdown-item>
					  </el-dropdown-menu>
					</el-dropdown>
    			</div>
    			
    			
    		</div>
			
			<el-table :data="table" :show-summary=true :height="tableHeight" 
				:row-class-name="tableRowClassName"
				@header-click="tableClick"
				@cell-click="cellClick"
				v-if="eltableshow"
				@filter-change="filterChange"
			>	
				
				<el-table-column type="selection" width="80" >
				</el-table-column>

				<el-table-column :label="item.name"  sortable='custom' :prop='item.ordname' v-for="(item, index) in tableShowTh" :min-width="150"  :key="index" show-overflow-tooltip v-if="item.ordname != 'ID'">
			      <template scope="scope" >
						
						
						
						<!-- 复选框    *********判断显示类型-->    
						<el-checkbox
							disabled
							v-model="scope.row[item.ordname].val"
							v-if='!item.combobox && (scope.row[item.ordname].val == "是" || scope.row[item.ordname].val == "否") && !scope.row[item.ordname].isfk'>
						</el-checkbox>   
						
						<!-- 下拉框 -->

						<el-select 
							placeholder="请选择"
							disabled
							v-model="scope.row[item.ordname].val"
							v-if='item.combobox'
						>
						    <el-option
						      v-for="item2 in item.combobox"
						      :key="item2.limitval"
						      :label="item2.limitdesc"
						      :value="item2.limitval">
						    </el-option>
						</el-select>

						<!-- span -->
						<span v-if='!item.combobox && (scope.row[item.ordname].val != "是" && scope.row[item.ordname].val != "否") && !scope.row[item.ordname].isfk'>
							{{scope.row[item.ordname].val}}
						</span>

						<!-- checkbox -->
						
						
			          	<span  v-if="scope.row[item.ordname].isfk">{{ scope.row[item.ordname].val }}</span>
						<el-icon name="time" v-if="scope.row[item.ordname].isfk" :data-id="scope.row[item.ordname].objid"></el-icon>

			      </template>
			    </el-table-column>



			    <!-- <el-table-column
			      prop="type"
			      label="隐藏列"
			      width="100"
			      fixed="right"
			      :filters="tableHiddenTH"
			      
			      filter-placement="top">
			    </el-table-column> -->
				
			    <!-- <el-table-column type="selection" width="70" >
				</el-table-column>
			    <el-table-column label="日期"  sortable='custom' prop='date'> 
			      <template scope="scope" >
	          		  <el-icon name="time"></el-icon>
			          <span style="margin-left: 10px">{{ scope.row.date }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column prop="name" label="姓名" sortable='custom'>
					<template scope="scope">
			        	<el-checkbox></el-checkbox>
			      	</template>

			    </el-table-column>
			    <el-table-column prop="imgSrc" label="图片" >
			    	<template scope="scope">
			        	<el-popover
						  placement="right"
						  title=""
						  trigger="hover"
						  >
						  <img :src="scope.row.imgSrc" width="150" >
						  <img :src="scope.row.imgSrc" width="20" style="vertical-align: middle" slot="reference" >
						</el-popover>
			      	</template>
					
			    </el-table-column>
			    <el-table-column prop="address" label="地址" show-overflow-tooltip >
			    </el-table-column>
			    <el-table-column prop="price" label="价格" sortable='custom'>
			    	<template scope="scope">
					  <el-select placeholder="请选择" v-model="scope.row.price.value">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
					</template>
			    </el-table-column>
			    <el-table-column
			      prop="type"
			      label="隐藏列"
			      width="100"
			      :filters="[{ text: '家', value: '家' }, { text: '公司1', value: '公司1' }, { text: '公司2', value: '公司2' }, { text: '公司3', value: '公司3' }]"
			      :filter-method="filterTag"
			      filter-placement="bottom-end">
			    </el-table-column> -->

			</el-table>

    	</div>



    	<!-- message -->
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  size="tiny"
		  :close="closeDialog">
		  <span v-text="dialogMessage"></span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog">取 消</el-button>
		    <el-button type="primary" @click="buttonConfirm">确 定</el-button>
		  </span>
		</el-dialog>



    </div>
</template>

<script type="ecmascript-6">
	import Bus from 'event/bus.js'
	import datevue from "../components/tablelist/date.vue"
    export default{
    	props: {
    		param: {     //id
    			type: Object   //通过传递对象，在子组建可以同时改变父组件的值
    		}
    	},
    	data () {

    		return {
    			"progressShow":false,  //进度条控制
    			"buttonMap":'',  //按钮字典
    			"searchlist": '',  //查询条件列表
    			"searchword":'', //查询条件
    			"searchobj":{},  //查询条件
    			"buttonGroupShow":[],  //展示按钮列表
    			"buttonGroupHidden":[],  //更多按钮列表
    			"buttonrefresh":'',  //刷新按钮
    			"waListButtons":'', //查询条件按钮
    			"table": [],   //信息表数据
    			'tableHeight': 400,  //表高度
    			'searchListShow': true, //查询条件展示
    			'formListIshow':false,
    			"dialogVisible":false, //消息提示框
    			'dialogMessage':'', //消息提示框显示数据
    			'dialogObj':'',  //消息框确认提交数据
    			'iframeObj':'', //iframe数据
    			'formObj':{   
    				"tableid": '',     
    				"column_include_uicontroller": true
    			},  //查询条件
    			'currentpage': 1,   //当前页
    			'table_page_size': [],   //每页显示条数数组
    			'defaultrange': '',  //默认每页条数
    			'formObj_tableid':'',
    			'tableName': '',   //表名
    			'totalDatas':[],  //所有table数据
    			'eltableshow':false,
    			'tableTH':[],  //头部
    			'tableShowTh': [],  //显示头部
    			'tableHiddenTH': [],  //隐藏的th
    			'subtotalRow':[],  //合计
    			'subtotalRow2':[],  //合计2
    			'fullRangeSubTotalRow': [],  //总计
    			'fullRangeSubTotalRow2': [],  //总计2
    			'totalRowCount': 0,  //数据总数 判断分页
    			// 'checkboxed': true,
    			'orderArr':[],   //排序集合
                  "date":''
    		}
    	},
    	watch: {
    		tableShowTh:function(val, oldval){
    			let _self = this
    			this.$nextTick(function(){

    				
    				$('.el-table__footer-wrapper tbody tr:gt(0)').remove()
    				var  divbox = ''
	  				var box = ''
	  				box += '<td colspan="1" rowspan="1" class="el-table_1_column_1234 el-table-column--selection is-leaf"><div class="cell">合计</div>'
	  				_self.tableShowTh.forEach((item, index) => {
	  					
	  						if(item.ordname == 'ID'){

	  						}else{
	  							box += '<td colspan="1" rowspan="1" class="el-table_1_column_'+index+'  is-leaf"><div class="cell">'+(_self.subtotalRow2[index]?_self.subtotalRow2[index]:"")+'</div></td>'
	  						}
	  						
	  					
	  				})

	  				var tr = $('<tr>'+box+'</tr>')				  				
	  				$('.el-table__footer-wrapper tbody').append(tr)




	  				var  divbox2 = ''
	  				var box2 = ''
	  				box2 += '<td colspan="1" rowspan="1" class="el-table_1_column_1234 el-table-column--selection is-leaf"><div class="cell">总计</div>'
	  				_self.tableShowTh.forEach((item, index) => {

	  						if(item.ordname == 'ID'){

	  						}else{
	  							box2 += '<td colspan="1" rowspan="1" class="el-table_1_column_'+index+'  is-leaf"><div class="cell">'+(_self.fullRangeSubTotalRow2[index]?_self.fullRangeSubTotalRow2[index]:"")+'</div></td>'
	  						}

	  				})

	  				var tr2 = $('<tr>'+box2+'</tr>')				  				
	  				$('.el-table__footer-wrapper tbody').append(tr2)
    			})
    		}
    	},
    	methods: {
    	  clickListShow () {
    	  	//收缩查询条件
    	  	this.searchListShow = !this.searchListShow;
    	  	// $('.demo-form-inline').toggle('blind',{},500);
    	  	if(this.searchListShow){
    	  		$(".demo-form-inline").slideDown(300);
    	  		$(".tableList").css('margin-top',"10px")
    	  		$(".searchList .tag-close").css('bottom',"-15px")
    	  	}else{
    	  		$(".demo-form-inline").slideUp(300);
    	  		$(".tableList").css('margin-top',"0px")
    	  		$(".searchList .tag-close").css('bottom',"-16px")
    	  	}
    	  	
    	  	
    	  },
	      handleSizeChange (size) {
	      	// alert('每页显示条数:'+size);
	      	this.formObj.range = size
	      	this.defaultrange = Number(size)
	      	this.searchData('fresh')
	      },
	      handleCurrentChange (index) {
	      	// alert('当前页码:'+index)
	      	this.currentpage = index
	      	this.searchData('fresh')
	      },
	      tableRowClassName(row, index) {
	      	// 每行的状态
	        // if (index % 2 == 1) {
	        //   return 'info-row';
	        // } else if (index > 3 && index <5) {
	        //   return 'positive-row';
	        // }
	        // return '';
	      },
	      filterChange(filters) {
	      	// 筛选显示列
	      	let _self = this
	      	let obj = []
	      	for(var item in filters){
	      		obj = filters[item]
	      		

	      		if(obj.length > 0 ){

	      			obj.forEach((item, index) => {
	      				_self.tableShowTh.forEach((temp, index) => {
	      					if(temp.ordname == item){
	      						_self.tableShowTh.splice(index,1)
	      						_self.subtotalRow2.splice(index,1)
	      					}
		      			})
	      			})
	      			

	      		}else{
	      			_self.tableShowTh = _self.tableTH
	      			_self.subtotalRow2 = _self.subtotalRow
	      			
	      		}
	      		return ;
	      	}
      	  },
      	  cellClick(row, column, cell, event){
      	  	
      	  	if($(cell).find('.cell').find('.el-icon-time').length > 0){
      	  		console.log('图标跳转')
      	  	}else{
      	  		console.log('单元格点击')
      	  	}
      	  	
      	  	this.tableClick();
      	  	event.stopPropagation()
      	  },
      	  tableClick(){
      	  	// 解决切换的收缩
      	  	
		      if ($(".tag").hasClass('active')) {
		      	$(".tag-down").slideUp();
		        setTimeout(() => {
		          $(".tag").removeClass('active')
		        }, 500)
		      } 
      	  },
      	  searchList(ID,option){
  	  		let _self = this;
  	  		// _self.searchList();


			 $.ajax({
			  	url:'/p/cs/getTableQuery',
			  	dataType:'json',
			  	type:'post',
			  	data:{
			  		'tableid':ID,
			  		"getcmd":option
			  	},
			  	success:function(data){

			  		if(data.code != 0){
			  			_self.formListIshow = false
		  				// $('.tableList #'+_self.param.id).css('display','none')
			  			return;
			  		}

			  		_self.searchlist = data.datas.dataarry
			  		_self.searchword = data.tabcmd
			  		_self.waListButtons = data.waListButtons
			  		_self.formObj_table = data.datas.table
			  		_self.formObj_tableid = data.datas.tableid
			  		_self.tableName = data.datas.table
			  		// $('.detailList').css('margin-top','0px')

			  		
			  		
			  		if(data.waListButtons != undefined){
			  			if(data.waListButtons.length == 0 && data.datas.dataarry.length == 0){
			  				_self.formListIshow = false
			  				// $('.tableList #'+_self.param.id).css('display','none')
			  				// $('.detailList').css('margin-top','10px')
			  			}else{
			  				// $('.tableList #'+_self.param.id).css('display','block')
			  				_self.formListIshow = true
			  			}
			  		}else{
			  			if(data.datas.dataarry.length == 0){
			  				_self.formListIshow = false
			  				// $('.tableList #'+_self.param.id).css('display','none')
			  				// $('.detailList').css('margin-top','10px')
			  			}else{
			  				// $('.tableList #'+_self.param.id).css('display','block')
			  				_self.formListIshow = true
			  			}	
			  		}
			  		

			  		// 按钮排序
			  		var arr = {}
			  		var arr2 = {}
			  		for(var item2 in _self.searchword){    //保存四个按钮

			  			if(item2.indexOf('action') > -1 && _self.searchword[item2]){
			  				let type = item2.split('action')
				  			let str = "CMD_"+type[1].toUpperCase()
				  			
				  			if(str == "CMD_ADD" || str == "CMD_MODIFY" || str == "CMD_DELETE" || str == "CMD_SUBMIT"){
				  				arr[str] = _self.buttonMap[str]
				  			}
				  			
			  			}
			  		}

			  		arr2.CMD_ADD = arr.CMD_ADD
			  		arr2.CMD_MODIFY = arr.CMD_MODIFY
			  		arr2.CMD_DELETE = arr.CMD_DELETE
			  		arr2.CMD_SUBMIT = arr.CMD_SUBMIT

			  		for(var item3 in arr2){  //删除空节点
				  		// _self.buttonGroupShow.push( arr2[item3])

				  		if(!arr2[item3]){
				  			delete arr2[item3]
				  		}
			  		}

			  		// end button sort

			  		for(var item3 in arr2){
				  		_self.buttonGroupShow.push( arr2[item3])
			  		}


			  		for(var item in _self.searchword){
			  			if(item.indexOf('action') > -1 && _self.searchword[item]){
			  				let type = item.split('action')
				  			let str = "CMD_"+type[1].toUpperCase()
				  			var obj = _self.buttonMap[str]
				  			if(_self.buttonGroupShow.length < 4 && str != "CMD_ADD" && str != "CMD_MODIFY" && str != "CMD_DELETE" && str != "CMD_SUBMIT"){
  								_self.buttonGroupShow.push(obj)
	
				  			}else{
				  				if(str == "CMD_ADD" || str == "CMD_MODIFY" || str == "CMD_DELETE" || str == "CMD_SUBMIT"){

				  				}else{
				  					_self.buttonGroupHidden.push(obj)
				  				}
				  				
				  			}
				  			
			  			}
			  			
			  		}

			  		//end button

			  		

			  		// enter

			  		_self.$nextTick(function(){

			  			// enter
			  			$('.el-form-item .EditText').off('keydown').on('keydown',function(event){

			  				let list_length = $('.EditText').eq($('.EditText').length-1).attr('data-index')

			  				let key = event.keyCode

			  				
			  				if(key == 13){

			  					let index = $(this).attr('data-index')

			  					if(index < list_length){
			  						$(this).parent().parent().nextAll().find('.EditText').eq(0).find('input').focus()
			  					}else{
			  						_self.searchData('search')
			  					}
			  					
			  				}
			  			})
			  		})

			  	}

			  })

      	  },
      	  getJson(){
      	  	let _self = this
      	  	_self.searchlist.forEach((item, index) => {

      	  		if(item.display == 'OBJ_DATE' || item.display == 'OBJ_DATENUMBER'){  //判断时间
      	  			var obj = {}

      	  			var  datediv = $('#'+item.colid)
      	  			// console.log( $($('#'+item.colid).find('input')[0]).val())
      	  			var time = $('#'+item.colid).find('input').val()
      	  			// console.log(time.split(' - '))

      	  			if(!time){
      	  				obj.start = null
      	  				obj.end = null
      	  			}else{
      	  				var endtime = time.split(' - ')[1]
	      	  			var starttime = time.split(' - ')[0]
	      	  			obj.start = starttime
	      	  			obj.end = endtime
      	  			}
      	  			

      	  			_self.searchobj[item.colinputName] = obj

      	  		}else{
      	  			if(item.default == '是'){
	      	  			_self.searchobj[item.colinputName] = 'Y'
	      	  		}else{
	      	  			if(item.default == '否'){
	      	  				_self.searchobj[item.colinputName] = 'N'
	      	  			}else{
	      	  				_self.searchobj[item.colinputName] = item.default
	      	  			}
	      	  		}
      	  		}
      	  	})

      	  	for(var temp in _self.searchobj){

      	  		if(!_self.searchobj[temp]){
      	  			delete _self.searchobj[temp]
      	  		}
      	  	}	

      	  	return _self.searchobj

      	  },
      	  webaction(obj){
      	  	var _self = this 
      	  	if(obj.webaction.act == "acttab"){     //tablelist
      	  		Bus.$emit('srearchId', obj.webdesc,obj.webaction.param.par[0].ID);
      	  		// Bus.$emit('srearchId', obj.webdesc,10057);

      	  		return;
      	  	}

      	  	if(obj.webaction.act == 'acturl'){   //iframe
      	  		console.log('创建新的iframe')
      	  		var url = obj.webaction.url

      	  		if(obj.webaction.param.dom){    //存在dom节点
	      	  		obj.webaction.param.dom.forEach(item => {
	      	  			for(var dom in item){

	      	  				_self.searchlist.forEach(item2 => {
	      	  					if(item2.colinputName == item[dom]){
	      	  						url += dom+'='+item2.default+'&'
	      	  					}
	      	  				})
	      	  			}
	      	  		})
	      	  	}else{
	      	  		obj.webaction.param.par.forEach(item => {

	      	  			for(var par in item){
	      	  				url += par+'='+item[par]+'&'
	      	  			}
	      	  		})
	      	  	}

	      	  	url = url.substr(0, url.length - 1); 
	      	  
	      	  
	      	  	// 调用框架

	      	  	Bus.$emit('srearchId', obj.webdesc,obj.webid,url);

      	  		return;
      	  	}

      	  	if(obj.webaction.act == 'actprocess'){   //按钮操作
      	  		
      	  		_self.dialogVisible = true
      	  		_self.dialogMessage = obj.confirm.desc
      	  		_self.dialogObj = obj.webaction
      	  		return;
      	  	}
      	  },
      	  closeDialog(){
      	  	this.dialogVisible = false
      	  },
      	  buttonConfirm(){
      	  	var _self = this      	
      	  	var obj = {}
      	  	if(_self.dialogObj.param.dom){    //存在dom节点
      	  		_self.dialogObj.param.dom.forEach(item => {
      	  			for(var dom in item){

      	  				_self.searchlist.firEach(item2 => {
      	  					if(item2.colinputName == item[dom]){
      	  						obj[dom] = item2.default
      	  					}
      	  				})
      	  			}
      	  		})
      	  	}else{
      	  		_self.dialogObj.param.par.forEach(item => {

      	  			for(var par in item){
      	  				obj[par] = item[par]
      	  			}
      	  		})
      	  	}

      	  	 $.ajax({
      	  	 	url:_self.dialogObj.url,
			  	dataType:'json',
			  	type:'post',
			  	data:JSON.stringify(obj),
			  	success:function(res){

			  	}
      	  	 })
      	  },
      	  reaptData(obj){

      	  	if(obj instanceof Array){   //array
      	  		let temp = []
      	  		obj.forEach((item,index) => {
      	  			temp.push(item)
      	  		})

      	  		return temp
      	  	}else{   //obj
      	  		let temp = {}

      	  		for(var item in obj){
      	  			temp[item] = obj[item]
      	  		}

      	  		return temp
      	  	}
      	  },
      	  searchData(option){
      	  	let _self = this
      	  	_self.table = []
      	  	// _self.formObj.table = _self.formObj_table
       	  	_self.formObj.tableid = _self.param.id
       	  	// _self.formObj.tableid = 22601
      	  	if(option == 'first'){

      	  	}else{
      	  		if(!$.isEmptyObject(_self.getJson())){
      	  			_self.formObj.fixedcolumns = _self.getJson()
      	  		}else{
      	  			delete _self.formObj.fixedcolumns
      	  		}

      	  		

      	  		if(_self.orderArr.length > 0){
      	  			_self.formObj.orderby = _self.orderArr
      	  		}else{
      	  			delete _self.formObj.orderby
      	  		}
      	  		
      	  		if(option == 'search'){
	      	  		_self.formObj.range = 10
	      	  		_self.currentpage = 1
	      	  		// console.log(_self.formObj)
	      	  		_self.formObj.startindex = 0

	      	  	}else{
	      	  		if(option == 'fresh'){

	      	  			_self.formObj.startindex = _self.defaultrange * (_self.currentpage - 1)
	      	  			// console.log(_self.formObj)
	      	  		}
	      	  	}
      	  	}
      	  	
      	  	
      	  		$.ajax({
	      	  	 	url:'/p/cs/QueryList',
				  	dataType:'json',
				  	type:'post',
				  	data:{searchdata:JSON.stringify(_self.formObj)},
				  	success:function(res){
				  		if(res.code == 0 ){
				  			let obj = res.datas
				  			_self.totalDatas = obj
				  			_self.tableTH = obj.tabth
				  			 

				  			// 生成隐藏对象
				  			obj.tabth.forEach((item, index) => {
				  				let temp = {
				  					'text':item.name,
				  					'value':item.ordname
				  				}
				  				_self.tableShowTh.push(item)
				  				_self.tableHiddenTH.push(temp)
				  			})
				  			_self.table = obj.row
				  			_self.subtotalRow = _self.reaptData(obj.subtotalRow)
				  			_self.subtotalRow2 = _self.reaptData(obj.subtotalRow)

				  			_self.fullRangeSubTotalRow = _self.reaptData(obj.fullRangeSubTotalRow[0])
				  			_self.fullRangeSubTotalRow2 = _self.reaptData(obj.fullRangeSubTotalRow[0])
				  			
				  			
				  			let temp = {}
				  			_self.totalRowCount = obj.totalRowCount  //分页总数
				  			_self.table_page_size = obj.selectrange

				  			
				  			_self.defaultrange = Number(obj.defaultrange)
				  			
				  			
				  			// obj.rows.forEach((item, index) => {
				  			// 	item.forEach((list, index) => {
				  			// 		if(obj.tabth[index].type=='NUMBER' && list == null){
				  			// 			temp[obj.tabth[index].ordname.replace('.','|')] = 0
				  			// 		}else{
				  			// 			temp[obj.tabth[index].ordname.replace('.','|')] = list
				  			// 		}
				  					
				  			// 	})

				  			// 	_self.table.push(temp)
				  			// 	temp = {}

				  			// })

				  			_self.eltableshow = true
				  			
				  			_self.$nextTick(function(){

				  				_self.tableTH.forEach((item, index) => {
				  					
				  					$('.tableList #detailList'+_self.param.id).find('.el-table__header-wrapper thead tr th:gt(0)').eq(index).attr('data-prop',item.ordname)
				  				})

				  				_self.orderArr.forEach((item, index) => {
				  					
				  					let str = item.name
				  					
				  					$('.tableList #detailList'+_self.param.id).find('.el-table__header-wrapper thead tr th[data-prop='+str.split('.')[1]+']').removeClass('ascending').removeClass('descending').addClass(item.asc?'ascending':'descending') 
				  				})


				  				// end add attr

				  				$('.el-table__footer-wrapper tbody tr:eq(0)').css('display','none')
				  				$('.el-table__footer-wrapper tbody tr:gt(0)').remove()
				  				if(obj.isSubTotalEnabled){   //合计
				  					var  divbox = ''
					  				var box = ''
					  				box += '<td colspan="1" rowspan="1" class="el-table_1_column_1234 el-table-column--selection is-leaf"><div class="cell">合计</div>'
					  				_self.tableTH.forEach((item, index) => {
					  					
					  						if(item.ordname == 'ID'){

					  						}else{
					  							box += '<td colspan="1" rowspan="1" class="el-table_1_column_'+index+'  is-leaf"><div class="cell">'+(_self.subtotalRow[index]?_self.subtotalRow[index]:"")+'</div></td>'
					  						}
					  						
					  					
					  				})

					  				var tr = $('<tr>'+box+'</tr>')				  				
					  				$('.el-table__footer-wrapper tbody').append(tr)
				  				}

				  				if(obj.isFullRangeSubTotalEnabled){   //总计


				  					var  divbox = ''
					  				var box = ''
					  				box += '<td colspan="1" rowspan="1" class="el-table_1_column_1234 el-table-column--selection is-leaf"><div class="cell">总计</div>'
					  				_self.tableTH.forEach((item, index) => {

					  						if(item.ordname == 'ID'){

					  						}else{
					  							box += '<td colspan="1" rowspan="1" class="el-table_1_column_'+index+'  is-leaf"><div class="cell">'+(_self.fullRangeSubTotalRow[index]?_self.fullRangeSubTotalRow[index]:"")+'</div></td>'
					  						}
	
					  				})

					  				var tr = $('<tr>'+box+'</tr>')				  				
					  				$('.el-table__footer-wrapper tbody').append(tr)
				  				}

				  				// end 总计

				  				$('.tableList #detailList'+_self.param.id).find('.el-table__header-wrapper thead .el-table-column--selection .el-checkbox__input i').remove()

				  				$('.tableList #detailList'+_self.param.id).find('.el-table__header-wrapper thead .el-table-column--selection .el-checkbox__input').append($('<i> 行号</>'))

				  				$('.tableList #detailList'+_self.param.id).find('.el-table__body-wrapper tbody .el-table-column--selection .el-checkbox__input').remove('i')

				  				obj.row.forEach((item, index) => {
				  					
				  					$('.tableList #detailList'+_self.param.id).find('.el-table__body-wrapper tbody .el-table-column--selection .el-checkbox__input').eq(index).append($('<i>'+(obj.start+1+index)+'</>'))
				  				})


				  				// end 序号


				  				$('.tableList #detailList'+_self.param.id).find('.el-table__header-wrapper thead tr th:gt(0)').off('click').on('click',function(event){
				  							
				  							
				  							let obj = {
				  								prop:_self.tableName+'.'+$(event.currentTarget).attr('data-prop'),
				  								ordname:''
				  							}
						  					if(event.currentTarget._prevClass.indexOf('ascending') > 0){  //升序
						  						obj.ordname = 'ascending'
						  					}else{
						  						if(event.currentTarget._prevClass.indexOf('descending') > 0){ 
						  							//降序
						  							obj.ordname = 'descending'

						  						}else{   //无序

						  						}
						  					}

						  					_self.orderArr = []
						  					if(!obj.ordname){

						  					}else{
						  						_self.orderArr.push({'name':obj.prop,'asc':obj.ordname=="ascending"})
						  					}

						  					

						  					_self.searchData('fresh')
						  					// _self.formObj.order_column = _self.orderArr
						  					// console.log(_self.orderArr)
						  					event.stopPropagation()
						  				})

				  				
				  				$(document).keydown(function(event) {    //alt+click
				  					if(event.keyCode == '18'){
				  						$('.tableList #detailList'+_self.param.id).find('.el-table__header-wrapper thead tr th:gt(0)').off('click').on('click',function(event){
						  			


						  					let obj = {
				  								prop:_self.tableName+'.'+$(event.currentTarget).attr('data-prop'),
				  								ordname:''
				  							}
						  					if(event.currentTarget._prevClass.indexOf('ascending') > 0){  //升序
						  						obj.ordname = 'ascending'
						  					}else{
						  						if(event.currentTarget._prevClass.indexOf('descending') > 0){ 
						  							//降序
						  							obj.ordname = 'descending'

						  						}else{   //无序

						  						}
						  					}


						  					var flag = true
						  					// console.log(obj)
						  					// console.log(_self.orderArr)

						  					if(_self.orderArr.length > 0){  //多个排序，需要判重
						  						_self.orderArr.forEach((item, index) => {
						  							
						  							
						  							if(!obj.ordname){   //无序，需要删除对应数据
						  								if(item.name == obj.prop){
						  									_self.orderArr.splice(index,1)
						  									flag = false
						  								}
						  							}else{   //有序，判重
						  								
						  								if(obj.prop == item.name){
						  									_self.orderArr[index].asc = obj.ordname=='ascending'
						  									flag = false
						  								}else{
						  									flag = true
						  								}
						  							}
						  						})

						  						if(flag){
						  							_self.orderArr.push({'name':obj.prop,'asc':obj.ordname=='ascending'})
						  						}
						  					}else{
						  						if(!obj.ordname){   //无排序

						  						}else{
						  							_self.orderArr.push({'name':obj.prop,'asc':obj.ordname=='ascending'})
						  						}
						  					}

						  					_self.searchData('fresh')
						  					// _self.formObj.order_column = _self.orderArr
						  					// console.log(_self.orderArr)
						  					event.stopPropagation()
						  					
						  				})
				  					}

				  					
				  				});

				  				$(document).keyup(function(event) {
				  					$('.tableList #detailList'+_self.param.id).find('.el-table__header-wrapper thead tr th:gt(0)').off('click').on('click',function(event){
						  					let obj = {
				  								prop:_self.tableName+'.'+$(event.currentTarget).attr('data-prop'),
				  								ordname:''
				  							}
						  					if(event.currentTarget._prevClass.indexOf('ascending') > 0){  //升序
						  						obj.ordname = 'ascending'
						  					}else{
						  						if(event.currentTarget._prevClass.indexOf('descending') > 0){ 
						  							//降序
						  							obj.ordname = 'descending'

						  						}else{   //无序

						  						}
						  					}

						  					
						  					_self.orderArr = []
						  					if(!obj.ordname){

						  					}else{
						  						_self.orderArr.push({'name':obj.prop,'asc':obj.ordname=="ascending"})
						  					}

						  					

						  					_self.searchData('fresh')
						  					// _self.formObj.order_column = _self.orderArr
						  					// console.log(_self.orderArr)
						  					event.stopPropagation()
						  				})
				  				});

				            })
				  		}
				  	}
	      	  	 })
      	  }

	    },
	    components:{datevue},
    	mounted () {

    		let _self = this
    		

    		
    		
    		// this.searchList(10003,'y')

    		

    	// 	  this.$ajax.get('/api/searchData')
			  // .then(function(response){
			  //   var response = response.data;
			  //   console.log(response)
			  //   _self.searchlist = response.data.datas;
			  //   _self.getJson()
			  // })
			  // .catch(function(err){
			  //   console.log(err);
			  // });
			 

			// this.$ajax.get('/api/detailList')
			//   .then(function(response){
			//     var response = response.data;
			//     _self.table = response.data;
			//   })
			//   .catch(function(err){
			//     console.log(err);
			//   });

			 
			

			

			 //  var trlist =  $( ".el-table .el-table__body tbody tr" )
			 // $('.el-table .el-table__body tbody').selectable();
			 // $( ".el-table .el-table__body tbody" ).selectable({
				//   stop: function( event, trlist ) {
				  	
				//   	// var tr = $(".el-table .el-table__body tbody tr")
				//   	// if($(".el-table .el-table__body tbody tr.ui-selected").length == $(tr).length){
				//   	// 	$(".el-table .el-table__header thead tr th span.el-checkbox__input").addClass('is-checked')
				//   	// }else{

				//   	// 	$(".el-table .el-table__header thead tr th span.el-checkbox__input").removeClass('is-checked')
				//   	// }
				//   	// $(".el-table .el-table__body tbody tr span.el-checkbox__input").removeClass('is-checked')
				//   	// $(".el-table .el-table__body tbody tr.ui-selected span.el-checkbox__input").addClass('is-checked')

				//   	_self.tableClick();
				  	
				//   }
				// });



				


			 
    	},
    	created:function(){
    		let _self = this

    		 // 按钮字典
    		_self.$ajax.get('/api/buttonList')
			  .then(function(response){
			    var response = response.data;
			    _self.buttonMap = response.data
			    _self.buttonrefresh = _self.buttonMap.CMD_REFRESH
			  })
			  .catch(function(err){
			    console.log(err);
			  });



    		_self.searchList(_self.param.id,'y')
    		_self.searchData('first')


    		$(document).off('keydown').on('keydown',function(event){
				 var key = event.keyCode; //e.which是按键的值
				 if( event.altKey && key == 81){
				 	_self.searchData('search')
				 }
				    
			})

    		
    	}
    }
</script>

<style lang="less">

.tableList{
    box-sizing: border-box;
	width: 100%;
	padding:0px 20px 10px;
	margin-top: 10px;
	display: flex;
	flex-direction:column;
	font-size: 12px!important;

	.el-progress{
		.el-progress-bar__outer{
			border-radius: 0;
			height: 2px!important;
			.el-progress-bar__inner{
				border-radius: 0;
				background-color: yellow;
			}
		}
	}
	.searchList{
		margin-bottom: 16px;
		position: relative;
		p{
			line-height: 21px;

			button{
				width: 66px;
				height: 26px;
				padding: 0;
				margin-left: 10px;
				font-size: 12px;
			}

			i{
				color: blue
			}
		}
		
		.demo-form-inline{
			border: 1px solid #dfdfdf;
			padding: 10px 20px;
			font-size: 12px;
			overflow: hidden;
			>div.el-form-item{
				width:25%;
				margin-right: 0;
				margin-bottom: 0px;
				position: relative;
				

				
				.el-input{
					line-height: 20px;
				}
				
				.el-checkbox__inner{
					width: 14px;
					height: 14px;
				}
				.el-checkbox__inner::after{
					left: 3px;
					top: 0px;
				}
				input[type=text]{
					padding-right: 35px;
				    border-top: none;
    				border-left: none;
    				border-right: none;
    				border-radius: 0px;
    				font-size: 12px;
				}

				

				.datevue{
					height: 40px;
					>div{
						div{
							height: 20px;
							line-height: 20px;
							i{
								z-index: 999;
							}
							input{
								height: 20px;
								
							}
						}
					}
				}

				.el-form-item__content{
					line-height: none;
					height: 40px;
				}

				.EditText{
					.el-input__inner[type=text]{
						border: none;
						border-bottom: 1px solid #bfcbd9;
						border-radius: 0px;
						height: 24px;	
					}
				}

				.EditSelect{
					width:100%;
					.el-input__inner[type=text]{
						height: 24px;
						border-radius: 0px;

					}
				}
				

				.el-form-item__label{
					font-size: 12px;
				    min-width: 80px;
				    height: 40px;
				    padding-top: 14px;
				}

				.el-date-editor{
					width:100%;
					border-radius: 0px;
				}

				

			}

			>div:last-child{
				margin-bottom: 0;
			}
			
			.button-group{
				margin-top: 10px;
				button{
					min-width: 66px;
					height: 28px;
					margin-right: 12px;
					padding: 0;
					border:1px solid #0bb09e;
					color: white;
					background: #0bb09e;
					border-radius: 2px;
					font-size: 12px;
					margin-left: 0;
					&:active{
						background:#0ca594;
						color:#a1d7cf;
					}

					&:hover{
						background:white;
						color:#0bb09e;
						border-color: #0bb09e;
					}
				}
				button:last-child{
					margin-right: 0;
				}
			}
			
		}



		.tag-close{
			width: 40px;
			height: 15px;
			position: absolute;
			left: 50%;
			bottom: -15px;
			margin-left: -20px;
			background-color: white;
			text-align: center;
    		line-height: 15px;
		    border: 1px solid #dfdfdf;
		    border-top: 0;
		    cursor: pointer;
		}

	}
	
	.detailList{
		
		flex: 1;
		display: flex;
		flex-direction: column;
		.detailHead{
			margin-bottom: 7px;
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;

			.el-pagination__sizes{
				margin-top: -1px;
			}
			.button-group{
				flex: 1;
				text-align: right;
				button{
					height: 28px;
					width: 66px;
					margin-right: 12px;
					padding: 0;
					background: #fff;
					color: #0bb09e;
					// border:none;
					border:1px solid #0bb09e;
					border-radius: 2px;
					font-size: 12px;
					&:active{
						opacity: 0.6;	
					}

					&:hover{
						background:  #0bb09e;
						color: white;
						border-color: #0bb09e;
					}
				}

				button:last-child{
					margin-right: 0px;
				}
			}
			.el-pagination{
				flex: 1;
				text-align: left;
				padding: 0;
				
				.el-pagination__total{
					margin: 0 10px 0px 0px;
				}
				.el-pager{
					li.active{
					    border-color: #d4dade;
    					background-color: #d4dade;
					}
				}
			}
		}

		.el-table{
			width: none;
			max-width: none;
			flex: 1;
			font-size: 12px!important;
			.el-table__header-wrapper{
				table {
					thead {

						tr {
							th{
								background: #f5f6fa;

							}

							.el-checkbox__inner{
									vertical-align: middle;
									width: 14px;
									height: 14px;

									&:after{
										left: 3px;
										top: 0px;
									}
								}
						}

						div{
							background: #f5f6fa;
							color: #999;
						}
					}
				}
			}
			.info-row {
			    background: #C4E1FF;
			  }
			.positive-row {
			    background: #e2f0e4;
			  }
			.el-table__body{
				tbody{
					tr.ui-selecting,tr.ui-selected{
						background: #C4E1FF; 
						color: white;
					}

					tr{
						td{
							height: 34px;

							.el-select{
							    width: 80%;
    							height: 26px;
    							.el-input{
    								width: 90%;
    								input{
    									height: 26px;
    									font-size: 12px;
    								}
    							}
							}
						}

						td.el-table-column--selection{
							.el-checkbox__input{

								.el-checkbox__inner{
									vertical-align: middle;
									width: 14px;
									height: 14px;

									&:after{
										left: 3px;
										top: 0px;
									}
								}
								

								i{
									vertical-align: middle;
									margin-left: 5px;
								}
							}
						}
					}
				}
				
			}

			.el-table__body-wrapper{
				.el-table__empty-block{
					width: 100%!important;
				}
				
			}

			.el-table__footer-wrapper{
				margin-top: 0;
				tbody{
					tr{
						td{
							height: 34px;
						}
					}
				}
			}


			.el-table__fixed-right{
				right: 1px;
				.el-table__fixed-footer-wrapper{
					tbody{
						tr{
							td{
								height: 33px;
							}
						}
					}
				}
			}

		}
	}

}
</style>
